<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>图书馆座位预约系统</title>
    <script type="text/javascript" src="{{ basepath }}static/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ basepath }}static/layui/css/layui.css">
    <!--plugin-->
    <style type="text/css">
        body {
            width:100%;
            height:100%;
            background-image:url("../library/static/img/index_img.jpg");
            background-repeat:no-repeat;
            background-size:100%;
            z-index:0;
        }
        .header {
            font-family:"楷体";
            text-align:center;
            font-size:70px;
            color:#666167;
            font-weight:900;
        }
        .jifen_box{
            width:80%;
            height:auto;
            padding:15px;
            background-color: rgba(255,255,255,.6);
            border-radius: 4px;
            box-sizing: border-box;
            margin:50px auto;
        }
        .jifen_box>p{
            font-size:18px;
            line-height: 30px;
        }
        .jifen_box .gz_box{
            margin-top: 50px;
        }
        .jifen_box .gz_box p{
            color:#999;
            line-height: 24px;
        }
        .content{
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
        }
        .content li{
            width:120px;
            height: 120px;
            background-color: #fff;
            border:1px solid #ccc;
            border-radius: 4px;
            text-align: center;
        }
        .content li:not(:last-child) {
            margin-right: 30px;
        }
         .content li p{
             margin-top: 20px;
             margin-bottom: 20px;
         }
    </style>
</head>
<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<p style="padding: 15px;line-height: 30px;font-size: 20px;font-weight: 600;"><a  href="{{ basepath }}/library/index"><span class="span1">返回</span></a></p>
<!-------------------------------------- 头部结束 -------------------------------------->
<!-------------------------------------- 内容开始 -------------------------------------->
<main>
    <div class="header">
        <p>图书馆座位预约系统</p>
    </div>
    <div class="jifen_box">
        <p>当前积分：<span style="color:red;font-weight:600;font-size:20px;">{{jf}}</span>分</p>
        <ul class="content">
            <li>
                <p>清除违规记录</p>
                <p><input type="button" value="兑换" id="dh" class="layui-btn layui-btn-normal" lay-submit lay-filter="wgdh"></p>
            </li>
            <li style="line-height: 120px;">正在开发中...</li>
        </ul>

        <div class="gz_box">
            <p>积分兑换规则：</p>
            <p>您可以在这里通过兑换积分的形式获取以下特权。用户可以使用兑换按钮，以相应积分兑换一次特权，每个特权所对应的积分各不相同。举个栗子：用15积分兑换"清除违规记录"特权，使用后系统将清除最近的一次违规记录。</p>
        </div>

    </div>

</main>
<!-------------------------------------- 内容结束 -------------------------------------->
<!-------------------------------------- 尾部开始 -------------------------------------->
<footer>
    <div class="container">

    </div>
</footer>
<!-------------------------------------- 尾部开始 -------------------------------------->
</body>
</html>
<style>

</style>
<script>
    $(dh).click(function () {
        var con=confirm('您确认' + $(this).html()+'，是否继续兑换？')
        if(con) {
            $.ajax({
                type: "POST",
                url: "{{ basepath }}wgjfdh",
                dataType: "json",
                success: function (data) {
                        alert('您已成功兑换');
                        window.location.reload()
                        console.log(data);
                    },
                error: function (data, status, e) {
                    alert(e);
                }
            });
        }
        else{
            alert('您已取消兑换！')
            }
    });
</script>

